<template>
	<view id="voteThree">

		<view class="vote-three-wrap">
			<view class="vote-title">{{this.voteDetailInfo.vote_type == 1 ? '业主大会表决' : '解聘现物业业主大会投票'}}</view>
			<view class="vote-title sub-title">剩余投票时间：
				<!--        倒计时-->
				<template>
					<u-count-down :timestamp="diffTimeInfo.minutes * 60" separator="zh" separator-size="28"
						separator-color="#606266">
					</u-count-down>
				</template>
			</view>

			<!-- 成立业主委员会业主大会 -->
			<view v-if="this.voteDetailInfo.vote_type == 1">
				<!--        点击下载文件-->
				<view class="vote-item" style="padding-bottom: 20px;">
					<view class="vote-mr" style="display: flex; align-items: center;">
						<!-- <text class="title">业主规约：</text> -->
						<view class="middle" @click="viewDoctor(ownerStatute)">
							<image class="word" src="/static/vote/word.png"></image>
						</view>
						<view class="right" @click="viewDoctor(ownerStatute)">
							<span>{{ownerStatute.file_name}}</span>
						</view>
					</view>
					<view @click="agreeFile(ownerStatute.id)" class="agree-btn" v-if="!ownerStatute.agreeClickFlag">
						同意
					</view>
					<view class="vote-status" v-if="ownerStatute.agreeClickFlag">
						您已同意
					</view>

					<view class="vote-mr" style="display: flex;">
						<!-- <text class="title">议事规则：</text> -->
						<view class="middle">
							<image class="word" src="/static/vote/word.png"></image>
						</view>
						<view class="right" @click="viewDoctor(rulesOfProcedure)">
							<span>{{rulesOfProcedure.file_name}}</span>
						</view>
					</view>
					<view @click="agreeFile(rulesOfProcedure.id)" class="agree-btn"
						v-if="!rulesOfProcedure.agreeClickFlag">
						同意
					</view>
					<view class="vote-status" v-if="rulesOfProcedure.agreeClickFlag">
						您已同意
					</view>
				</view>
				<!-- 统计什么，需求未明确 -->
				<view class="vote-line"></view>
				<view v-if="ownerStatute.agreeClickFlag && rulesOfProcedure.agreeClickFlag" class="vote-item"
					style="margin-top: 40rpx;min-height: 40rpx;padding-bottom: 15px;">
					<view style="  font-size: 16px; font-weight: bold;margin-left: 22px;padding-top: 15px;">数据统计</view>
					<view style="margin-left: 320px;margin-top: -20px;" v-if="!yegfOpen" @click="pullDownFlag(true)">打开
					</view>
					<view style=" margin-left: 320px;margin-top: -20px;" v-if="yegfOpen" @click="pullDownFlag(false)">关闭
					</view>
					<view v-if="yegfOpen==true">
						<view v-for="(item,index) in statisticsListInfo" :key="index">
							<view class="charts-pie">
								<view class="charts-box" style="height: 200rpx; width: 300rpx;margin-left:40px;">
									<qiun-data-charts ringWidth="20" type="pie" dataLabel="false" :chartData="item"
										:eopts="{legend:{show:false}}" :echartsH5="true" :echartsApp="true"
										background="none" />
								</view>
								<view class="content">
									<view class="">{{showTextList[index].ratioStr}}</view>
									<view style="margin-top: 30rpx;">{{showTextList[index].showRemark}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="voteRules">
					每人有1票，最多可投票{{voteDetailInfo.four_members_number + voteDetailInfo.four_replenish_members_number}}人
				</view>
				<view class="votePersonInfo" v-for="(item, index) in voteUserList">
					<view class="votePersonWrap" @click="nameListDetail(item)">
						<view class="">
							<image style="width: 180rpx;height:220rpx; vertical-align: middle; border-radius: 20rpx;"
								:src="item.user_coronal_photograph_img"></image>
						</view>
						<view class="personInfo">
							<view class="">姓名：
								<text class="font_color">{{ item.full_name }}</text>

							</view>
							<view class="">楼号：
								<text class="font_color">{{ item.building_number }}</text>
							</view>
							<view class="">性别：
								<text class="font_color">{{ item.sexCode==2?"女":"男" }}</text>
							</view>
							<view class="">民族：
								<text class="font_color">{{ item.user_nation }}</text>
							</view>
							<view class="">政治面貌：
								<text class="font_color">{{ item.user_olitical_outlook }}</text>
							</view>
						</view>
					</view>
					<view class="vote-bottom-btn">
						<view class="" v-if="alreadyVoteTotal == 0">投票后可查看票数</view>

						<u-checkbox @change="checkboxChange(item)" v-model="item.whetherVote">投票</u-checkbox>

						<!-- 注销 -->
						<!-- <view class="btn" @click="addUpdateVote(item,index)"
							v-if="!item.whetherVote && alreadyVoteTotal == 0">投Ta一票</view> -->
						<view style="color:#000;font-weight: bold;" v-if="alreadyVoteTotal != 0">
							已投{{item.committee_member_total}}票
						</view>
						<!-- <view v-if="item.whetherVote" @click="cancelAdd(item,index)" class="btn already">已投票</view> -->
					</view>
				</view>
				<br><br><br><br>
				<view class="bottom-btn" v-if="this.voteDetailInfo.vote_type == 1" v-show="alreadyVoteTotal == 0">
					<view class="submit-vote" @click="confirmAddVote">
						确认投票
					</view>
				</view>
			</view>

			<!-- 解聘物业业主大会 -->
			<view v-if="this.voteDetailInfo.vote_type == 2">
				<view v-if="this.voteDetailInfo.fire_property_whether_industry_committee == 2">
					<view style="font-size: 36rpx;font-weight: bold;margin-left: 15px;">委托人：</view>
					<view class="votePersonInfoClient" v-for="(item, index) in voteUserList">
						<view class="votePersonWrapClient" @click="nameListDetail(item)">
							<view class="">
								<image style="width: 180rpx;height:220rpx;" :src="item.user_coronal_photograph_img">
								</image>
							</view>
							<view class="personInfoClient">
								<view class="">姓名：{{ item.full_name }}</view>
								<view class="">楼号：{{ item.building_number }}</view>
								<view class="">性别：{{ item.sexCode==2?"女":"男" }}</view>
								<view class="">民族：{{ item.user_nation }}</view>
								<view class="">政治面貌：{{ item.user_olitical_outlook }}</view>
							</view>
						</view>
					</view>
				</view>

				<view style="font-size: 36rpx;font-weight: bold;padding: 10px 0 10px 15px;">业主大会议题：</view>

				<view class="vote-item" style="padding-bottom: 20px;" v-for="(item, index) in thingsList">
					<view class="vote-mr" style="display: flex;">
						<text class="title">业主大会议题{{index+1}}：{{item.things_text}}</text>
					</view>
					<view>
						<text style="color: #999999;padding: 15px 0 0 20px;">
							已投：{{item.statute_agree}} 票
						</text>
						<view style="float: right;margin-right: 15px;" @click="agreeThings(item)" class="agree-btn"
							v-if="!item.agreeClickFlag && alreadyVoteTotal == 0">
							同意
						</view>
						<view style="float: right;margin-right: 15px;" @click="refusedThings(item)" class="vote-status"
							v-if="item.agreeClickFlag">
							您已同意
						</view>
					</view>
				</view>

				<br><br><br><br>
				<view class="bottom-btn" v-show="alreadyVoteTotal == 0">
					<view class="submit-vote" @click="agreeThing">
						确认投票
					</view>
				</view>
			</view>

		</view>


		<!-- 用户认证 -->
		<view style="position: relative;">
			<view class="meeting-dialog">
				<u-popup v-model="isCertification" mode="center" border-radius="14">
					<view class="meeting-wrap">
						<view class="meeting-title">
							未提交认证
						</view>
						<view class="meeting-start">
							<image class="img" src="../../../static/vote/seconded.png"></image>
						</view>
						<view class="meeting-cont">
							请先进行实名认证后进行附议
						</view>
						<view class="meeting-btn" @click="submit()">
							提交认证
						</view>
					</view>
				</u-popup>
			</view>
		</view>

		<!-- 确认投票弹窗 -->
		<view class="modal" v-if="confirm">
			<view class="modal-cont">
				<view class="modal-title">确认投票</view>
				<view style="color: #000000;margin-top: 30px;">
					是否确认投票
				</view>
				<view class="modal-bottom">
					<view class="btn-cancel" @click="confirm = false">关闭</view>
					<view class="btn-sure" @click="addVote()">确定</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />


	</view>
</template>

<script>
	//import uCharts from '@/uni_modules/qiun-data-charts/static/app-plus/echarts.min.js';
	export default {
		props: ['id', 'voteType'],
		components: {
			//	uCharts
		},
		data() {
			return {
				thingsList: [], //议题集合
				alreadyVoteTotal: 0,
				checkVoteTotal: 0,
				//表决详情
				voteDetailInfo: {},
				//剩余时间详细
				diffTimeInfo: {},
				//文件集合
				fileList: [],
				//业主规约
				ownerStatute: {},
				//议事规则
				rulesOfProcedure: {},
				userId: uni.getStorageSync('rawData').userId,
				voteUserList: [], //候选人集合
				voteUserInfo: {}, //认证详细
				isCertification: false, //用户认证
				confirm: false,
				centert: {}, //选中的投票对象
				checkIndex: null, //选中的投票对象下标

				//=
				timestamp: null,
				//===
				personnelList: [],
				itemList: [{
					head: "数据统计",
					body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
					open: false,
					disabled: false
				}],

				ownerInformation: {}, //缓存信息
				fourStepImgData: {}, //基本信息
				personnelInformation: [], //  人员信息
				protocolFile: [], //  规矩文件

				percentageList: [], //百分比



				yegfOpen: false,
				voteTanChang: 2,



				chartsData1: {},
				chartsData2: {},


				charts: {
					series: [{
						data: [{}]
					}]
				},
				showTextList: [],
				statisticsListInfo: [{
						"series": [{
							"data": [{
								"name": "7",
								"value": 50
							}, {
								"name": "6",
								"value": 250
							}]
						}]
					},
					{
						"series": [{
							"data": [{
								"name": "7",
								"value": 50
							}, {
								"name": "6",
								"value": 30
							}]
						}]
					},
				],

				PieA: {
					"series": [{
						"data": [{
							"name": "7",
							"value": 50
						}, {
							"name": "6",
							"value": 30
						}]
					}]
				},


			}
		},



		mounted() {
			this.getVoteDetailInfo();
			this.verifyVoteTotal();
			this.getFileList()
			//获取选择人集合
			this.getVoteUserList();
			//获取操作人认证详细
			this.getVoteUserInfo();
			if (this.voteType == 2) {
				// this.verifyVoteTotal();
				// this.getFileList()
				//获取统计信息
				this.getStatisticsInfo();
			}
			if (this.voteType == 8) {
				//解聘物业，事项
				this.getThings();

			}

		},
		methods: {
			checkboxChange(item) {
				console.log('aaaaaaa', this.checkVoteTotal)
				console.log('item', item.whetherVote)
				if (item.whetherVote) {
					this.checkVoteTotal = 1
				}
				if (!this.voteUserInfo.id || !this.voteUserInfo.building_number) {
					this.isCertification = true
					return
				}
				if (this.alreadyVoteTotal != 0) {
					this.$refs.uToast.show({
						title: '您已投票，无法再次投票',
						type: 'warning',
						icon: false
					})
					return;
				}
				if (this.voteDetailInfo.four_members_number + this.voteDetailInfo.four_replenish_members_number == this
					.checkVoteTotal) {
					this.$refs.uToast.show({
						title: '可投票数已达上限',
						type: 'warning',
						icon: false
					})
					return;
				}
			},
			//投票
			addUpdateVote(item, index) {
				console.log(index)
				this.checkIndex = index;
				this.centert = item
				this.confirm = true;
			},


			agreeThing() {
				console.log('e')
				this.thingsList.forEach((item, index) => {
					if (item.agreeClickFlag) {
						this.$requestYz.api.agreeFile({
							id: item.id,
							user_id: this.userId,
							state: 1,
							record_type: 1,
						}).then(res => {})
					}
					if (index == this.voteUserList.length - 1) {
						this.alreadyVoteTotal = 1
						this.checkVoteTotal = 0;
						uni.showToast({
							title: '投票成功！',
							icon: 'success'
						});
						let that = this;
						setTimeout(function() {
							that.alreadyVoteTotal = 1
							that.checkVoteTotal = 0;
							that.getThings();
						}, 1000);
					}
				});
			},


			//同意议题
			agreeThings(val) {
				if (this.alreadyVoteTotal != 0) {
					return
				}
				val.agreeClickFlag = true;
			},
			//拒绝议题
			refusedThings(val) {
				if (this.alreadyVoteTotal != 0) {
					return
				}
				val.agreeClickFlag = false;
			},

			getStatisticsInfo() {
				this.$requestYz.api.getStatisticsInfo({
					id: this.id,
				}).then(res => {
					this.statisticsListInfo = res.data.data.resultList
					this.showTextList = res.data.data.textList
				})
			},
			//确认投票
			confirmAddVote() {
				console.log(1111, this.checkVoteTotal)
				if (this.alreadyVoteTotal != 0) {
					this.$refs.uToast.show({
						title: '您已投票，无法再次投票',
						type: 'warning',
						icon: false
					})
					return;
				}
				if (this.checkVoteTotal == 0) {
					this.$refs.uToast.show({
						title: '请选择投票对象',
						type: 'warning',
						icon: false
					})
					return;
				}
				this.voteUserList.forEach((item, index) => {
					if (item.whetherVote == true) {
						this.$requestYz.api.ownerVote({
							id: item.id,
							user_id: uni.getStorageSync('rawData').userId,
							user_name: this.voteUserInfo.full_name,
							voteType: 2, //1.筹备组投票
							user_building_number: this.voteUserInfo.building_number //投票人房间信息
						}).then(res => {})
					}
					if (index == this.voteUserList.length - 1) {
						this.alreadyVoteTotal = 1
						this.checkVoteTotal = 0;
						uni.showToast({
							title: '投票成功！',
							icon: 'success'
						});
					}
				});
			},
			//校验是否投过票
			verifyVoteTotal() {
				this.$requestYz.api.verifyVoteTotal({
					essential_information_id: this.id,
					voteType: 2,
					user_id: uni.getStorageSync('rawData').userId,
				}).then(res => {
					this.alreadyVoteTotal = res.data.data.data
				})
			},
			nameListDetail(item) {
				let items = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: '/pages/vote/components/publicity/nameDetail?item=' + items
				})
			},
			cancelAdd(item, index) {
				if (this.alreadyVoteTotal != 0) {
					this.$refs.uToast.show({
						title: '您已投票，无法再次投票',
						type: 'warning',
						icon: false
					})
					return;
				}
				this.voteUserList[this.checkIndex].whetherVote = false;
				this.voteUserList[this.checkIndex].committee_member_total = this.voteUserList[this.checkIndex]
					.committee_member_total - 1
				this.checkVoteTotal = this.checkVoteTotal - 1;
			},
			addVote() {
				this.voteUserList[this.checkIndex].whetherVote = true;
				this.voteUserList[this.checkIndex].committee_member_total = this.voteUserList[this
					.checkIndex].committee_member_total + 1
				this.checkVoteTotal = this.checkVoteTotal + 1;
				this.confirm = false
			},

			//提交认证
			submit() {
				this.isCertification = false;
				uni.navigateTo({
					url: './submitAuth?vote_id=' + this.id + "&proName=" + this.voteDetailInfo.community_name
				})
			},
			getVoteUserInfo() {
				this.$requestYz.api.getVoteUserInfo({
					vote_id: this.id,
					user_id: this.userId,
				}).then(res => {
					this.voteUserInfo = res.data.data
				})
			},
			getThings() {
				this.$requestYz.api.getThingsList({
					essential_information_id: this.id,
					ownerAppSelect: 1,
					ownerSelect: 1,
					userId: this.userId,
				}).then(res => {
					this.thingsList = res.data.data.datalist;
					this.thingsList.forEach((item, index) => {
						if (item.agreeClickFlag == true) {
							this.alreadyVoteTotal = 1
							return
						}
					});
				})
			},
			//获取人列表
			getVoteUserList() {
				this.$requestYz.api.getOwnerAppVoteUserList({
					essential_information_id: this.id,
					voteType: 2,
					user_id: this.userId,
				}).then(res => {
					this.voteUserList = res.data.data.datalist;
				})
			},
			//同意文件
			agreeFile(id) {
				if (!this.voteUserInfo.id || !this.voteUserInfo.building_number) {
					this.isCertification = true
					return
				}

				this.$requestYz.api.agreeFile({
					id: id,
					user_id: this.userId,
					state: 1,
					record_type: 1,
				}).then(res => {
					if (res.data.code == 0) {
						this.getFileList();
						this.getStatisticsInfo();
					}
				})
			},
			//获取文件
			getFileList() {
				console.log(11111111)
				this.$requestYz.api.getFileList({
					essential_information_id: this.id,
					ownerSelect: 1,
					userId: this.userId,
					ownerAppSelect: 1, //标识参数
				}).then(res => {
					console.log(11111111, res)
					this.fileList = res.data.data.datalist;
					res.data.data.datalist.forEach((item, index) => {
						if (item.statute_state == 1) {
							this.ownerStatute = item
						}
						if (item.statute_state == 2) {
							this.rulesOfProcedure = item
						}
					});
				})
			},
			//表决详细
			getVoteDetailInfo() {
				this.$requestYz.api.getVoteDetailInfo({
					id: this.id,
				}).then(res => {
					this.voteDetailInfo = res.data.data.voteInfo;
					this.getTimeDiffInfo();
				})
			},
			//获取剩余时间
			getTimeDiffInfo() {
				this.$requestYz.api.getDiffTime({
					endTime: this.voteDetailInfo.six_holding_end_time + ' 23:59:59'
				}).then(res => {
					this.diffTimeInfo = res.data.data;
				})
			},
			//打开关闭
			pullDownFlag(flag) {
				this.yegfOpen = flag;
			},














			// 事件触发，每秒一次
			change(timestamp) {
				console.log(timestamp, "---------事件触发，每秒一次------------------");
			},
			// ref形式获取内部的值
			getSeconds() {
				console.log(this.$refs.uCountDown.seconds);
			},

			//投ta一票
			voteTa() {
				uni.$emit('stepFun', 4)
			},

			//getVoteUserEsseInfo
			// 增加投票数据








			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					this.chartData1 = this.chartData;
				}, 500)

			},



			// 获取列表
			getList() {
				this.$requestYz.api.getpersonnellist({
					project_id: uni.getStorageSync('projectItem').proId,
					types: "jhyutkhjhg"
				}).then(res => {
					this.personnelList = res.data.data
				})
			},
			//显示文档
			viewDoctor(item) {
				console.log(item, "---------------")
				uni.downloadFile({
					url: item.statute_img,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							},
							fail() {
								console.log('打开文档失败');
							}
						});
					}
				});
			},



		}
	}
</script>

<style lang="scss">
	::v-deep .u-collapse-head {
		font-size: 32rpx !important;
		font-weight: bold !important;
	}

	.bottom-btn {
		width: 100%;
		height: 108rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;

		.submit-vote {
			width: 570rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 44rpx;
			margin: 12rpx auto;
			text-align: center;
			line-height: 88rpx;
			color: #fff;
		}
	}

	$color: #999;
	$bold: bold;

	.meeting-dialog {
		position: relative;

		::v-deep .u-mode-center-box {
			width: 670rpx !important;
			height: 800rpx;
			background: #FFFFFF !important;
			border-radius: 12rpx !important;
		}

		.meeting-wrap {
			padding: 40rpx;
		}

		.meeting-title {
			font-size: 18px;
			font-weight: bold;
			padding-bottom: 20px;
			border-bottom: 1px solid #E7ECE1;
		}

		.meeting-start {
			margin: 40rpx 0 24rpx;
			font-size: 16px;
			font-weight: bold;

			.img {
				width: 160px;
				height: 114px;
				margin: 0 auto;
				transform: translate(74px, 8px);
			}
		}

		.meeting-cont {
			color: red;
			font-size: 32rpx;
			border-bottom: 60rpx;
			margin-top: 50rpx;
			margin-bottom: 120rpx;
			text-align: center;
		}

		.succ {
			color: #333300;
			font-weight: bold;
		}

		.meeting-btn {
			width: 350rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #FFFFFF;
			border-radius: 22px;
			border: 1px solid #427705;
			text-align: center;
			color: #427705;
			margin: 40px auto;
			font-weight: bold;
		}
	}

	#voteThree {
		.vote-three-wrap {
			.vote-title {
				font-size: 36rpx;
				font-weight: bold;
				margin: 30rpx auto 0;
				text-align: center;
			}

			.sub-title {
				font-size: 28rpx;
				margin: 20rpx auto 40rpx;
				font-weight: $bold;
				color: $color;
			}

			.colors {
				color: red;
			}
		}

		.rules {
			height: auto;
		}

		.u-collapse {
			padding: 30rpx 46rpx;

		}

		.modal {
			/* width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba($color: #000000, $alpha: 0.6);
			z-index: 999; */
			position: fixed;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.8);
			z-index: 10;
		}

		.modal-cont {
			width: 610rpx;
			// min-height: 420rpx;
			background: #ffffff;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.modal-icon {
			width: 80rpx;
			height: 80rpx;
			margin-top: 67rpx;
		}

		.modal-title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 45rpx;
			margin-top: 22rpx;
		}

		.modal-content {
			width: 443rpx;
			// height: 88rpx;
			font-size: 28rpx;
			text-align: center;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 44rpx;
			margin-top: 24rpx;
		}

		.text-area {
			margin-top: 24rpx;
			width: 520rpx;
			padding: 10rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 44rpx;
			max-height: 105rpx;
			border: 1rpx solid #f0f0f0;
			border-radius: 8rpx;
		}

		.modal-bottom {
			width: 100%;
			height: 84rpx;
			border-top: 1rpx solid #e6e9ed;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 50rpx;
		}

		.btn-cancel {
			width: 50%;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			border-right: 1rpx solid #d8d8d8;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			box-sizing: border-box;
		}

		.btn-cancel1 {
			width: 100%;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			/* border-right: 1rpx solid #d8d8d8; */
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			box-sizing: border-box;
		}

		.btn-sure {
			width: 50%;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #578ef0;
		}

		.charts-pie {
			display: flex;
			align-items: center;
		}

		.content {
			margin-left: 60rpx;
			font-size: 29rpx;
			font-weight: bold;
			color: #000;
		}

		.vote-item {
			width: 100%;
			min-height: 244rpx;
			background: #FFFFFF;

			.vote-mr {
				padding: 30rpx 46rpx;
			}

			.vote-status {
				color: #427705;
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
				padding: 5px 0 10px 0;
			}

			.vote-line {
				width: 345px;
				height: 1px;
				border: 1px solid #EEEEEE;
				margin: 30rpx auto;
			}

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.middle {
				// margin-left: 46rpx;
			}

			.right {
				margin-left: 46rpx;
				color: #4C77F2;
				font-weight: $bold;
				text-decoration: underline;
			}

			.word {
				width: 40rpx;
				height: 50rpx;
				vertical-align: middle;
			}

			.agree-btn {
				width: 176rpx;
				height: 60rpx;
				background: linear-gradient(180deg, #76D904 0%, #417505 100%);
				border-radius: 20rpx;
				color: #fff;
				text-align: center;
				line-height: 31px;
				margin: 0 auto;
			}
		}

		.voteRules {
			margin: 15rpx auto;
			height: 70rpx;
			text-align: center;
			line-height: 100rpx;
			color: #999;
			font-size: 28rpx;
		}

		.votePersonInfo {
			width: 100%;
			height: 400rpx;
			background: #FFFFFF;
			box-shadow: 0px 1px 0px 0px #EEEEEE;
			margin-top: 40rpx;

			.votePersonWrap {
				padding: 30rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #999;
				box-shadow: 0px 1px 0px 0px #eee;
			}

			.personInfo {
				margin-left: 40rpx;
				line-height: 46rpx;
			}

			.vote-bottom-btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				padding: 0 30rpx;
				color: #999;

				.btn {
					width: 176rpx;
					height: 60rpx;
					background: linear-gradient(180deg, #76D904 0%, #417505 100%);
					border-radius: 44rpx;
					color: #fff;
					line-height: 60rpx;
					text-align: center;
				}

				.already {
					background: #FFFFFF;
					color: #999;
					border: 1px solid #CCCCCC;
				}
			}
		}

		.votePersonInfoClient {
			width: 100%;
			height: 290rpx;
			background: #FFFFFF;
			box-shadow: 0px 1px 0px 0px #EEEEEE;
			margin-top: 40rpx;

			.votePersonWrapClient {
				padding: 30rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #999;
			}

			.personInfoClient {
				margin-left: 40rpx;
				line-height: 46rpx;
			}

			.vote-bottom-btnClient {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				padding: 0 30rpx;
				color: #999;

				.btnClient {
					width: 176rpx;
					height: 60rpx;
					background: linear-gradient(180deg, #76D904 0%, #417505 100%);
					border-radius: 44rpx;
					color: #fff;
					line-height: 60rpx;
					text-align: center;
				}

				.alreadyClient {
					background: #FFFFFF;
					color: #999;
					border: 1px solid #CCCCCC;
				}
			}
		}
	}

	.font_color {
		color: #000;
	}
</style>